<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>博客管理</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2">
                            <select id="status" class="form-control">
                                <option value="1">发布</option>
                                <option value="0">草稿箱</option>
                                <option value="2">回收站</option>
                            </select>
                        </div>
                        <div class="col-sm-3 pull-right">
                            <div class="col-sm-9"><input type="text" id="search" class="form-control" placeholder="Search"></div>
                            <button type="button" id="refresh" class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i></button>
                        </div>
                    </div>

                    <table id="datatable" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>
                                <button type="button" id="selectAll" class="btn btn-outline btn-primary btn-xs"><i class="fa fa-plus"></i></button>
                                <button type="button" id="selectZero" class="btn btn-outline btn-primary btn-xs"><i class="fa fa-minus"></i></button>
                                <button type="button" id="deleteSelect" class="btn btn-outline btn-danger btn-xs"><i class="fa fa-trash-o"></i></button>
                                <button type="button" id="recoverSelect" class="hidden btn btn-outline btn-default btn-xs"><i class="fa fa-reply"></i></button>
                            </th>
                            <th>id</th>
                            <th>标题</th>
                            <th>类型</th>
                            <th>标签</th>
                            <!--<th>状态</th>-->
                            <th>推荐</th>
                            <th>置顶</th>
                            <th>其他</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <div class="modal-title"></div>
                    <i class="fa fa-eye"></i><span id="lookCount"></span>
                    <i class="fa fa-heart"></i><span id="loveCount"></span>
                    <i class="fa fa-comment"></i><span id="commentCount"></span>
                </div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/content.js"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script>
    var table;
    $(function(){
        table=  $('#datatable').DataTable({
            info : true,
            paging: true,//开启分页
            pageLength:10,
            lengthMenu:  //自定义分页长度
                [ 10, 20, 50 ]
            ,
            searching: false,
            ordering:  false,
            dom: '<"top"i>rt<"bottom"flp><"clear">',
            //列对应关系
            columns: [
                {
                    sClass:"text-center",
                    data: 'id',
                    render:function(id){
                        return '<input type="checkbox" name="select" value="'+id+'" /> ';
                    }
                },
                { data: 'id' },
                {
                    sClass:"text-center",
                    data: 'title',
                    render:function(data){
                        return data.length>15?(data.substr(0,14)+'...'):data;
                    }
                },
                {
                    width:"50px",
                    sClass:"text-center",
                    data: "type",
                    render: function (data) {
                        if(data!=null)
                            return data.name;
                        else
                            return null;
                    }
                },
                {
                    width:"100px",
                    sClass:"text-center",
                    data: "tags",
                    render: function (data, type, full, meta) {
                        var tagsHtml='';
                        for(var i in data){
                            tagsHtml+='<span class="label label-info">'+data[i].name+'</span>';
                            if(i>=2){
                                tagsHtml+=' ...';
                                break;
                            }
                        }
                        return tagsHtml;
                    }
                },
                // {
                //     sClass:"text-center",
                //     data:'status',
                //     render:function(data, type, full, meta){
                //         switch(data){
                //             case 0:return "草稿";
                //             case 1:return "发布";
                //             default:return "回收站";
                //         }
                //     }
                // },
                {
                    sClass:"text-center",
                    data:'recommended',
                    render:function(data, type, full, meta){
                        if(data){
                            return "Y";
                        }else
                            return "N";
                    }
                },
                {
                    sClass:"text-center",
                    data:'top',
                    render:function(data, type, full, meta){
                        if(data){
                            return "Y";
                        }else
                            return "N";
                    }
                },
                {
                    sClass:"text-center",
                    data:'lookCount',
                    render:function(data, type, full, meta){
                        return '<i class="fa fa-eye"></i>'+data+'\n<i class="fa fa-heart"></i>'+full.loveCount+
                            '\n<i class="fa fa-comment"></i>'+full.commentCount;
                    }
                },
                {
                    sClass:"text-center",
                    data:'id',
                    render:function(data,type,full){
                        if(full.status==0){//草稿

                            return '<a class="edit btn btn-xs btn-primary" onclick="edit(' + data + ',\''+full.title+'\')"><i class="fa fa-edit"></i>编辑</a>'+
                                '<a class="btn btn-xs btn-danger btn-remove" onclick="recycle(['+data+'])"><i class="fa fa-trash-o"></i>删除</a>'+
                                '<a class="btn btn-xs btn-info" onclick="getContent('+ data + ')" data-toggle="modal" data-target="#myModal4" ><i class="fa fa-info"></i>预览</a>';

                        }else if(full.status==1){//发布

                            return '<a class="btn btn-xs btn-success btn-top" onclick="toTop('+data+')"><i class="fa fa-arrow-circle-up"></i>'+(full.top?'取消置顶':'置顶')+'</a>'+
                                '<a class="btn btn-xs btn-success btn-recommend"  onclick="toRecommended('+data+')"><i class="fa fa-thumbs-o-up"></i>'+(full.recommended?'取消推荐':'推荐')+'</a><br>'+
                                '<a class="edit btn btn-xs btn-primary" onclick="edit(' + data + ',\''+full.title+'\')"><i class="fa fa-edit"></i>编辑</a>'+
                                '<a class="btn btn-xs btn-danger btn-remove" onclick="recycle(['+data+'])"><i class="fa fa-trash-o"></i>删除</a>'+
                                '<a class="btn btn-xs btn-info" onclick="getContent('+ data + ')" data-toggle="modal" data-target="#myModal4" ><i class="fa fa-info"></i>预览</a>';

                        }else {//回收站

                            return '<a class="btn btn-xs btn-success btn-top" onclick="recover(['+data+'])"><i class="fa fa-arrow-circle-up"></i>恢复</a>'+
                                '<a class="btn btn-xs btn-danger btn-remove" onclick="remove(['+data+'])"><i class="fa fa-trash-o"></i>彻底删除</a>'+
                                '<a class="btn btn-xs btn-info" onclick="getContent('+ data + ')" data-toggle="modal" data-target="#myModal4" ><i class="fa fa-info"></i>预览</a>';

                        }

                    }
                }
            ],
            processing: true,
            serverSide: true,
            ajax: {
                type:'POST',
                url:'/api/article/dataList',
                data: function (d) {
                    var params= {
                        keywords:$("#search").val(),
                        draw:d.draw,
                        pageNumber:d.start/d.length+1,
                        pageSize:d.length,
                        status:$("#status").val()
                    };
                    for(var key in d){
                        delete d[key];
                    }
                    //附加查询参数
                    if(params){
                        $.extend(d,params); //给d扩展参数
                    }
                },
                // dataSrc: function (resp) {
                //     var dataJson={};
                //     dataJson.draw=
                //     return json.data;
                // },
                dataType : 'json',
            }
        });


    $("#selectAll").click(function(){
        $("input[name='select']").each(function() {
            this.checked = true;
        });
    });
    $("#selectZero").click(function(){
        $("input[name='select']").each(function() {
            this.checked = false;
        });
    });
    $("#deleteSelect").click(function(){
        var ids=[];
        var i=0;
        $("input[name=select]:checked").each(function() {
            ids[i++]=$(this).val();
        });
        var status=$("#status").val();
        if(status==2) {
            console.log("彻底删除"+ids);
            remove(ids);
        }else{
            console.log("放入回收站"+ids);
            recycle(ids);
        }
    });
    $("#recoverSelect").click(function(){
        var ids=[];
        var i=0;
        $("input[name=select]:checked").each(function() {
            ids[i++]=$(this).val();
        });
        recover(ids);
    });

    $("#search").blur(function(){
        table.draw(false);
    });
    $("#refresh").click(function(){
        table.draw(false);
    });
    $("#status").change(function(){
        table.draw(false);
        if($("#status").val()==2){
            $("#recoverSelect").removeClass('hidden');
        }else{
            $("#recoverSelect").addClass('hidden');
        }
    });

    //$()end
    });
    function edit(id,title){
        if(title.length>5)
            title=title.substr(0,4)+"...";
        parent.showMenuList('/publish.html?id='+id,99,"编辑博客："+title);
    }
    function toRecommended(id){
        console.log("recommended"+id);
        $.ajax({
            url:'/api/article/update/recommended',
            type:'post',
            data:{
                id:id
            },
            success:function(resp){
                if(resp.status==200){
                    toastr.success("修改推荐状态成功");
                    table.draw(false);
                }else{
                    toastr.error(resp.message);
                }
            }
        });
    }

    function toTop(id){
        console.log("top"+id);
        $.ajax({
            url:'/api/article/update/top',
            type:'post',
            data:{id:id},
            success:function(resp){
                if(resp.status==200){
                    toastr.success("修改置顶状态成功");
                    table.draw(false);
                }else{
                    toastr.error(resp.message);
                }
            }
        });
    }
    function remove(ids){
        console.log("delete" + ids);
        $.ajax({
            url: '/api/article/remove',
            type: 'post',
            data: {
                ids: ids
            },
            success: function (resp) {
                if(resp.status==200) {
                    toastr.success("彻底删除成功");
                    table.draw(false);
                }else{
                    toastr.error("操作失败");
                }
            },
            error: function () {
                toastr.error("操作失败");
            }
        });
    }

    function recycle(ids){
        console.log("delete" + ids);
        $.ajax({
            url: '/api/article/recycle/add',
            type: 'post',
            data: {
                ids: ids
            },
            success: function (resp) {
                if(resp.status==200) {
                    toastr.success("删除成功");
                    table.draw(false);
                }else{
                    toastr.error("操作失败");
                }
            },
            error: function () {
                toastr.error("操作失败");
            }
        });
    }

    function recover(ids){
        console.log("delete" + ids);
        $.ajax({
            url: '/api/article/recycle/recover',
            type: 'post',
            data: {
                ids: ids
            },
            success: function (resp) {
                if(resp.status==200) {
                    toastr.success("恢复成功");
                    table.draw(false);
                }else{
                    toastr.error("操作失败");
                }
            },
            error: function () {
                toastr.error("操作失败");
            }
        });
    }
    function getContent(id){
        console.log("id:"+id);
        $.ajax({
            url:'/api/article/get/'+id,
            type:'post',
            success:function(resp){
                if(resp.status==200){
                    $(".modal-title").html(resp.data.title);
                    $(".modal-body").html(resp.data.content);
                    $("#lookCount").html(resp.data.lookCount);
                    $("#loveCount").html(resp.data.loveCount);
                    $("#commentCount").html(resp.data.commentCount);
                }else{
                    toastr.error("获取内容失败");
                }
            },
            error:function(){
                toastr.error("请求失败");
            }
        });
    }

</script>


</body>

</html>